<script context="module">
  /**
   * @type {import('@sveltejs/kit').Load}
   */
	export async function load({ page, fetch, session, context }) {
		const url = `../posts.json`;
		const res = await fetch(url);

		if (res.ok) {
			return {
				props: {
					posts: await res.json()
				}
			};
		}
		return {
			status: res.status,
			error: new Error(`Could not load ${url}`)
		};
	}
</script>

<script>
  export let posts;
</script>

<svelte:head>
	<title>博客</title>
</svelte:head>

<div class="container mt-4">
	<div>
		{#each posts as { metadata: { title, description, tags, outline, slug, img, date }, path }}
        <div class="flex mb-4">
					<img src="{img}" alt="" class="mr-2 rounded-md shadow-xl">
          <div>
						<a sveltekit:prefetch href={path.replace(/\.[^/.]+$/, "")}>
							<h2 class="text-2xl leading-relaxed">{title}</h2>
						</a>
						<p> { date }</p>
          	<p >{description}</p>
					</div>
        </div>
      {/each}
	</div>
</div>


<style lang="scss">
.mt-4 {
	margin-top: 100px;
}
</style>